<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../frame/elementUI/lib-master/index.js"></script>

    <link rel="stylesheet" href="../css/index.css">
    <title>首页</title>
    <script>
        $(function () {
            $('#searchInput').keydown(function () {
                if(event.keyCode==13){
                    axios({
                        method: "GET",
                        url: "/other/search",
                        params:{
                            query: $('#searchInput').val()  //搜索内容
                        },
                    }).then((res)=>{
                        location.href = "search.html";
                    });
                }
            });
            //登录下拉菜单
            $(".ui.dropdown").dropdown({
                allowAdditions: true //允许添加新的菜单项
            });
        });

    </script>
</head>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted vertical masthead center aligned segment" style="padding-top: 5px;height: 70px">
        <div class="ui container">
            <!-- 主菜单 -->
            <div class="ui large secondary inverted pointing menu">
                <a class="item" href="index.html" ><i class="home icon"></i>首页</a>
                <a class="item" href="types.html" ><i class="idea icon"></i>分类</a>
                <a class="item" href="archives.html" ><i class="clone icon"></i>归档</a>
                <a class="item" href="tags.html" ><i class="tags icon"></i>标签</a>
                <a class="item" href="about.html" ><i class="info icon"></i>关于站长</a>
                <div class="right item" style="margin-top: 7px">
                    <div class="ui icon input">
                        <input type="text" :value="searchInput.query" placeholder="搜索....." style="width: 300px" id="searchInput">
                        <i @click="submitQuery()" class="search link icon"></i>
                    </div>
                </div>
                <!-- 登录 -->
                <div class="ui right floated dropdown item" style="margin-top: 7px;float: right">
                    <div class="text">
                        <img v-bind:src="visitor.avatar" class="ui avatar image" style="width: 30%">
                        <strong >{{visitor.username}}</strong>
                    </div>
                    <i class="ui dropdown icon"></i>
                    <div class="menu">
                        <a href="visitorLogin.html" class="item" v-if="visitor.id==null">登录</a>
                        <a href="visitorLogin.html" class="item" v-if="visitor.id!=null">切换账号</a>
                        <a @click="logout()" class="item">注销</a>
                    </div>
                </div>

            </div>
        </div>
    </nav>

    <!-- 中间内容 -->
    <div style="padding-top: 50px" >
        <div class="ui container">
            <div class="ui stackable grid">
                <!-- 文章头 -->
                <div class="ui  top attached segment">
                    <div class="ui  middle aligned two column grid">
                        <div class="column"><h4 class="ui teal header">博客</h4></div>
                        <div class="right aligned column">共<h4 class="ui orange header" style="display: inline-block">{{blogPage.pages}}</h4>页</div>
                    </div>
                </div>
                <!-- 文章内容主体 -->
                <div class="ui attached segment">
                    <!-- 文章一 -->
                    <div v-for="blog of blogPage.content" class="ui padded vertical segment" style="margin: 10px;">
                        <div class="ui mobile reversed stackable grid" >
                            <div class="eleven wide column" style="height: 150px !important;border: 0px solid !important;" >   <!-- 文章 -->
                                <a :href="'/other/getByid?id='+blog.id"><h3 class="ui header" style="color: #00a8c6">{{blog.title}}</h3></a>
                                <div style="height: 60px !important;border: 0px solid !important;">
                                    <a :href="'/other/getByid?id='+blog.id"><p style="color: black" >{{blog.description.substring(0,150)}}.......</p></a>
                                </div>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img :src="blog.user.avatar" alt="" class="ui avatar image">  <!-- 头像 -->
                                                <div class="content"><a class="header" href="#">{{blog.user.username}}</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>{{blog.updateTime}}
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>{{blog.views}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui teal basic label" style="opacity: 0.8">{{blog.type.name}}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="five wide column">
                                <a target="_blank" :href="'/other/getByid?id='+blog.id">   <!-- 图片 -->
                                    <img :src="blog.firstPicture"  class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 文章尾 -->
                <div class="ui bottom attached segment">
                    <div class="ui  middle aligned two column grid">
                        <div class="column">
                            <button  class="ui mini teal basic button" @click="Previous()" plain :disabled="blogPage.firstPage==true">上一页</button>
                        </div>
                        <div class="right aligned column">
                            <button class="ui mini teal basic button" @click="Next()" plain :disabled="blogPage.lastPage==true">下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="ui inverted vertical segment" style="padding-top: 50px;margin-top: 100px;">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="item">
                        <img src="../image/mybibi.jpg" class="ui rounded image" style="width: 120px">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header" style="opacity: 0.8">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#"class="item">用户故事（User Story）</a>
                        <a href="#"class="item">来自未来的你</a>
                        <a href="#"class="item">fate/zero</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header" style="opacity: 0.8">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#"class="item">转生成为魔剑那件事</a>
                        <a href="#"class="item">人生初体验</a>
                        <a href="#"class="item">学生故事（Student Story）</a>
                    </div>
                </div>
                <div class="seven wide column" style="opacity: 0.8">
                    <h4 class="ui inverted header">最新博客</h4>
                    <p>鄙人个人博客，仅有于非商业用途，为人民服务是我的职责（分享，程序，开发），来自一只可爱的程序猿</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="letter-spacing: 2px;opacity: 0.8" >Copyright # 2022-2023 Lirenmi Designed by Lirenmi</p>
            <div class="" style="height: 50px"></div>
        </div>
    </footer>
</div>
</body>
    <!-- axios -->
    <script src="../frame/axios/axios.min.js"></script>
<script>
    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data: {
            active: "1",
            //登录信息(留言时登录)
            visitor: {
                id: null,
                username: '未登录',
                password: '',
                email: '',
                avatar: 'https://img.gejiba.com/images/6fdc934e8cb5aa040764d0ff5b287d00.webp',
                createTime: ''
            },
            //搜索框内容
            searchInput: {
                query: '',
                currentPage: 0,
                pageSize: 5,
            },
            //文章分页数据
            blogPage:{
                content:[],
                currentPage: 0,   //当前页
                pageSize: 5,  //当前页条数
                total: 1,  //数据总条数
                pages : 1,  //总页数
                firstPage : false,  //是否有前一页
                lastPage: false,  //是否有下一页
            },
        },
        created(){
            this.findPage();
            this.gainVisiter();
        },
        methods:{
            //访客登录信息获取
            gainVisiter(){
                axios({
                    method: "GET",
                    url: "/visiter/gainData",
                }).then((res)=>{
                    if(res.data==''){

                    }else{
                        this.visitor=res.data;
                    }
                });
            },
            //注销访客
            logout(){
                axios({
                    method: "GET",
                    url: "/visiter/logout",
                }).then((res)=>{
                    location.reload();
                });
            },
            //获取当前页数据
            findPage(){
                axios({
                    method: "GET",
                    url: "/other/gainSearch/"+this.searchInput.currentPage+"/"+this.searchInput.pageSize,
                }).then((res)=>{
                    this.searchInput.query=res.data.query;
                    this.blogPage.content=res.data.page.content;
                    this.blogPage.currentPage=res.data.page.number;
                    this.blogPage.pageSize=res.data.page.size;
                    this.blogPage.total=res.data.page.totalElements;
                    this.blogPage.pages=res.data.page.totalPages;
                    this.blogPage.firstPage=res.data.page.first;
                    this.blogPage.lastPage=res.data.page.last;
                });
            },
            //搜索内容
            submitQuery(){
                axios({
                    method: "GET",
                    url: "/other/search",
                    params:{
                        query: this.searchInput.query  //搜索内容
                    },
                }).then((res)=>{
                    location.href = "search.html";
                });
            },
        }

    });
</script>
</html>